<?php include 'head.php'; ?>
    <title>答题记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-header">答题记录</div>
        <div class="layui-card-body">
            <table id="answer" lay-filter="answer"></table>
        </div>
    </div>
    
    <script type="text/html" id="user-toolbar">
    </script>

    <script type="text/html" id="answer-bar">
        <button class="pear-btn pear-btn-success pear-btn-sm" lay-event="info"><i class="layui-icon layui-icon-about"></i></button>
    </script>
</body>
<script src="/component/layui/layui.js"></script>

<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'element', 'popup', 'table'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            popup = layui.popup,
            table = layui.table;

        table.render({
            elem: '#answer',
            height: 500,
            url: './ajax.php?act=getanswer',
            page: true,
            escape: true,
            toolbar: '#answer-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            cols: [
                [{
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        fixed: 'left'
                    }, {
                        field: 'name',
                        title: '用户名',
                    }, {
                        field: 'gender',
                        title: '性别',
                        width: 80,
                        sort: true
                    }, {
                        field: 'time',
                        title: '答题用时',
                    }, {
                        field: 'date',
                        title: '答题时间',
                        sort: true
                    }, {
                        field: 'correct',
                        title: '正确数',
                        width: 100,
                    },
                    {
                        title: '操作',
                        toolbar: '#answer-bar',
                        align: 'left',
                        width: 150,
                        fixed: 'right'
                    }
                ]
            ]
        });


        table.on('tool(answer)', function(obj) {
            if (obj.event === 'info') {
                layer.open({
                    type: 2,
                    title: '查看详情',
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['500px', '500px'],
                    content: 'answerinfo.php?id=' + obj.data['id']
                });
            }
        });

        table.on('toolbar(answer)', function(obj) {
            if (obj.event === 'refresh') {
                table.reload('answer');
            }
        });

    });
</script>

</html>